<template>
    <div>
        <div>
            <div class="basic">
                <div class="header">
                    <div class="title">
                        <span>任务详情</span>
                    </div>
                </div>
                <div class="content">
                    <el-row>
                        <el-col :span="8">
                            <div class="first">
                                <span class="name">任务名称：</span>
                                <span class="con">{{ taskName }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="first">
                                <span class="name">任务类型：</span>
                                <span class="con">{{ taskType }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="first">
                                <span class="name">任务状态：</span>
                                <span class="con">{{ taskStatus }}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <div class="first">
                                <span class="name">委托单位：</span>
                                <span class="con">{{ targetUnit }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="first">
                                <span class="name">委托单位地址：</span>
                                <span class="con">{{ unitAddress }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="first">
                                <span class="name">委托单位电话：</span>
                                <span class="con">{{ unitPhone }}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <div class="first">
                                <span class="name">创建时间：</span>
                                <span class="con">{{ createTime }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="first">
                                <span class="name">任务开始时间：</span>
                                <span class="con">{{ beginTime }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="first">
                                <span class="name">任务结束时间：</span>
                                <span class="con">{{ endTime }}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="desc">
                        <span class="name">任务描述：</span>
                        <span class="con">{{ taskDesc }}</span>
                    </div>
                    <span class="divider" />
                </div>
            </div>
        </div>
        <div>
            <template>
                <el-table :data="profTaskDispatchList" style="width: 100%;">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item>
                                    <span style="font-size: medium; color: #337ab7;">任务评价信息</span>
                                </el-form-item>
                                <br>
                                <el-form-item label="主要服务内容及工作情况:">
                                    <span>{{ props.row.profServeDesc }}</span>
                                </el-form-item>
                                <br>
                                <el-form-item label="服务对象:">
                                    <span>{{ props.row.evaluateUnit }}</span>
                                </el-form-item>
                                <br>
                                <el-form-item label="服务对象评价:">
                                    <span>{{ props.row.taskEvaluate }}</span>
                                </el-form-item>
                                <br>
                                <el-form-item label="委派部门意见:">
                                    <span>{{ props.row.deptEvaluate }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="专家姓名"
                        prop="profName"
                    />
                    <el-table-column
                        label="所属专家组"
                        prop="profGroup"
                    />
                    <el-table-column
                        label="任务完成状态"
                        prop="profTaskStatus"
                    />
                </el-table>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ProfTaskDetail',
    data() {
        return {
            taskName: '',
            taskDesc: '',
            targetUnit: '',
            unitAddress: '',
            unitPhone: '',
            createTime: '',
            beginTime: '',
            endTime: '',
            taskStatus: '',
            taskType: '',
            profTaskDispatchList: []
        }
    },
    created() {
        this.taskName = this.$route.query.taskName
        this.taskDesc = this.$route.query.taskDesc
        this.targetUnit = this.$route.query.targetUnit
        this.unitAddress = this.$route.query.unitAddress
        this.unitPhone = this.$route.query.unitPhone
        this.createTime = this.$route.query.createTime
        this.beginTime = this.$route.query.beginTime
        this.endTime = this.$route.query.endTime
        this.taskStatus = this.$route.query.taskStatus
        this.taskType = this.$route.query.taskType
        this.profTaskDispatchList = this.$route.query.profTaskDispatchList
    }
}
</script>

<style scoped lang="scss">
    .basic {
        margin: 20px;
        background: #fff;
    }
    .header {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .first {
        display: flex;
        margin-left: 40px;
        margin-bottom: 25px;
        align-items: center;
    }
    .one {
        display: flex !important;
    }
    .two {
        display: flex !important;
    }
    .third {
        display: flex !important;
    }
    .name {
        min-width: 62px;
        overflow: hidden;
        white-space: nowrap;
        font-size: 16px;
    }
    .desc {
        display: flex;
        margin-left: 40px;
        margin-bottom: 25px;
    }
    .divider {
        display: block;
        border-bottom: solid 1px #f3f3f3;
    }
    .title {
        margin-left: 20px;
        color: #337ab7;
    }
    .statue {
        margin-left: 20px;
        padding-bottom: 15px;
        margin-top: 15px;
    }
    .progress {
        margin: 20px;
        background: #fff;
    }
    .con {
        font-size: 16px;
    }
    .nav {
        text-align: center !important;
        list-style: none;
        display: block;
        padding-left: 0;
        margin: 50px 0 0 0;
    }
    .complete {
        display: inline-block;
        border-top: 0.5rem solid #2196f3;
    }
    .nav-item {
        margin-left: 3px;
        border-top: 0.5rem solid #eee;
        display: inline-block;
    }
    .nav-link {
        color: #2196f3;
        padding: 12px 15px;
        margin-top: -1.85rem;
        display: inline-block;
        text-decoration: none;
    }
    .label {
        background-color: #2196f3;
        color: #fff;
        display: inline-block;
        width: 1.75rem;
        height: 1.75rem;
        line-height: 1.75rem;
        text-align: center;
        border-radius: 50%;
        font-size: 16px;
        font-weight: bold;
    }
    i {
        font-style: normal;
    }
    .mt-1 {
        margin-top: 0.5rem !important;
        font-size: 18px;
        margin-bottom: 0.5rem;
        font-weight: 500;
        line-height: 1.1;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>

